<template>
  <div class="example">
    <div class="container">
      <ul class="options">
        <li @click="state.page1 = true">内页一</li>
        <li @click="state.page2 = true">内页二</li>
        <li @click="state.page3 = true">内页三</li>
      </ul>
      <transition name="fade">
        <div class="page page1" v-show="state.page1">
          <header>
            <span class="back" @click="state.page1 = false">返回</span>
          </header>
          <div class="content">
            内页一的内容
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div class="page page2" v-show="state.page2">
          <header>
            <span class="back" @click="state.page2 = false">返回</span>
          </header>
          <div class="content">
            内页二的内容
          </div>
        </div>
      </transition>
      <transition name="fade">
        <div class="page page3" v-show="state.page3">
          <header>
            <span class="back" @click="state.page3 = false">返回</span>
          </header>
          <div class="content">
            内页三的内容
          </div>
        </div>
      </transition>
    </div>
  </div>
</template>

<script>
/**
 * 场景二：移动端页面切换
 */

export default {
  data() {
    return {
      isShow: true,
      className: '',
      state: {
        page1: false,
        page2: false,
        page3: false
      }
    }
  },
  methods: {
    handleClick() {
      this.isShow = !this.isShow
    }
  }
}
</script>

<style lang="less" scoped>
.fade-enter-active, .fade-leave-active {
  transition: all .5s;
}
// 告诉浏览器过渡进入 或者 过渡结束的元素的状态
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  transform: translateX(375px);
}

.example {
  width: 375px;
}

.page {
  position: absolute;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
  z-index: 10;
  left: 0;
  top: 0;
  width: 375px;
  height: 667px;

  &.page1 {
    background-color: #d5ffd5;
  }

  &.page2 {
    background-color: #ffd9d9;
  }

  &.page3 {
    background-color: #ffe6c8;
  }

  header {
    height: 50px;
    line-height: 50px;
    padding-left: 20px;
    border-bottom: 1px solid #e9e9e9;

    .back {
      cursor: pointer;
    }
  }

  .content {
    padding: 20px;
  }
}

.container {
  overflow: hidden;
  position: relative;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.22);
  width: 375px;
  height: 667px;

  .options {
    li {
      padding: 20px;
      width: 100%;
      border-bottom: 1px solid #e9e9e9;
      cursor: pointer;

      &:hover {
        background-color: #e9e9e9;
      }
    }
  }
}
</style>
